<template>
  <el-dialog title="轨迹" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" width="98%" top="0"
    @opened="opened" @close="closed" custom-class="trace-map-dialog">
    <div class="map-wrap" :style="{ height: mapHeight + 'px' }">
      <div id="trace-map"></div>
      <div class="map-control-container">
        <el-popover placement="top" width="400" trigger="click">
          <div class="map-style-container">
            <div :class="activeMapStyleIndex == 1 ? 'show' : ''" @click="changeMapLayer(1)">
              <img src="./../images/map1.jpg" width="80px" height="80px" />
              <p>普通模式</p>
            </div>
            <div :class="activeMapStyleIndex == 2 ? 'show' : ''" @click="changeMapLayer(2)">
              <img src="./../images/map2.jpg" width="80px" height="80px" />
              <p>深色模式</p>
            </div>
            <!-- <div
            :class="activeMapStyleIndex == 3 ? 'show' : ''"
            @click="changeMapLayer(3)"
          >
            <img src="./../images/map3.jpg" width="80px" height="80px" />
            <p>卫星模式</p>
          </div> -->
            <div :class="activeMapStyleIndex == 3 ? 'show' : ''" @click="changeMapLayer(3)">
              <img src="./../images/map4.png" width="80px" height="80px" />
              <p>三维地图</p>
            </div>
          </div>
          <div class="btn-box" slot="reference" @click="controlChange(1)">
            <i class="iconfont el-icon-layer" :class="activeIndex == 1 ? 'active' : ''"></i>
          </div>
        </el-popover>

        <div class="btn-box" @click="controlChange(2)">
          <i class="iconfont el-icon-ruler" :class="activeIndex == 2 ? 'active' : ''"></i>
        </div>
      </div>
      <div class="trace-play">
        <div class="play-bar">
          <div style="margin-right: 20px">
            <el-button v-if="!isMoving" icon="el-icon-video-play" type="primary" size="mini"
              :disabled="!traceList || traceList.length === 0 || isMoving" @click="carStartMove()">开始</el-button>
            <el-button v-else icon="el-icon-video-pause" type="primary" plain size="mini" :disabled="!isMoving"
              @click="carPauseMove()">暂停</el-button>
            <el-button icon="el-icon-refresh-right" type="primary" plain size="mini" :disabled="currentGpsIndex === 0"
              @click="carResetMove()">重置</el-button>
            <!-- <el-button
            type="primary"
            plain
            size="mini"
            :disabled="currentGpsIndex === 0"
            @click="carBackMove()"
            >向后</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            :disabled="currentGpsIndex === maxIndex"
            @click="carforeMove()"
            >向前</el-button
          > -->
            <el-button icon="el-icon-d-arrow-left" type="primary" plain size="mini" :disabled="!isMoving"
              @click="carSlowMove()">减速</el-button>
            <el-button icon="el-icon-d-arrow-right" type="primary" plain size="mini" :disabled="!isMoving"
              @click="carFastMove()">加速</el-button>
            <span style="margin-left: 10px">速度</span><span>{{ computedSpeed }}</span>
          </div>
          <div class="play-progress">
            <el-slider ref="timeSlider" v-model="currentIndex" :max="maxIndex" @input="moveSlider"
              @change="afterMoveSlider" :show-tooltip="false" input-size="mini"></el-slider>
          </div>
          <div class="trace-detail-btn" @click="toggleTraceList">
            <span style="font-size: 14px">详情</span>
            <i :class="traceListVisible ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
              " style="font-size: 16px"></i>
          </div>
        </div>
        <el-card class="trace-detail-card" v-show="traceListVisible">
          <div class="">
            <el-tabs value="first">
              <el-tab-pane label="轨迹详情" name="first">
                <el-table :data="traceList" size="mini" height="300">
                  <el-table-column v-if="tracePoint" :label="tracePoint.pointType == 1 ? '车牌' : '姓名'" align="center"
                    prop="name">
                    <template>
                      <span>{{ tracePoint.name }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="作业状态" align="center" prop="isWork" />
                  <el-table-column label="里程(km)" align="center" prop="calcMile" />
                  <el-table-column label="停留(min)" align="center" prop="stopMinute" />
                  <el-table-column label="速度(km/h)" align="center" prop="speed" />
                  <el-table-column label="油量(L)" align="center" prop="oilMass" />
                  <el-table-column label="运行状态" align="center" prop="devState" width="150" show-overflow-tooltip />
                  <el-table-column label="位置" align="center" prop="carLocation" width="180" show-overflow-tooltip />

                  <el-table-column label="通讯时间" align="center" prop="dataTime" width="180">
                    <!-- <template slot-scope="scope">
                    <span>{{
                      parseTime(scope.row.dataTime, "{y}-{m}-{d}")
                    }}</span>
                  </template> -->
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="告警数据" name="second"></el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
      <el-card class="trace-left-card" v-if="tracePoint">
        <div>
          <div class="info-brief">
            <span class="name">{{ tracePoint.name }}</span>
            <span class="type">{{ tracePoint.typeName }}</span>
            <span class="status" :class="tracePoint.onlineStatus == '在线' ? 'online' : ''">{{ tracePoint.onlineStatus
            }}</span>
          </div>

          <div class="quicktime">
            <div @click="handleSearchTrace(1)" :class="quicktimeActive == 1 ? 'active' : ''">
              今天
            </div>
            <div @click="handleSearchTrace(2)" :class="quicktimeActive == 2 ? 'active' : ''">
              昨天
            </div>
            <div @click="handleSearchTrace(3)" :class="quicktimeActive == 3 ? 'active' : ''">
              近三天
            </div>
          </div>
          <div style="color: rgba(0, 0, 0, 0.45); margin: 0 0 5px">日期</div>
          <div>
            <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" style="width: 330px">
            </el-date-picker>
          </div>
          <el-button type="success" size="small" style="background: #25bb96; margin-top: 15px; margin-bottom: 15px"
            @click="handleSearchTrace">查询轨迹</el-button><span v-if="traceList.length > 0" style="
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              font-weight: bold;
              font-family: 'DINPro';
              margin-left: 20px;
            ">总里程：{{ traceList[traceList.length - 1].calcMile }}km</span>
          <div class="trace-realtime" v-if="traceList.length > 0">
            <div class="realtime-item" style="display: flex">
              <div>当前时间：</div>
              <div>{{ traceList[currentIndex].dataTime }}</div>
            </div>
            <div class="realtime-item">
              <div style="width: 70px; float: left">当前位置：</div>
              <div>{{ traceList[currentIndex].carLocation }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="plain" icon="el-icon-download" @click="handleExport">导出轨迹表格</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from "vue";

import AMap from "AMap";
import CAR_PNG from "../icons/traceCar.png";
import MOTOR_PNG from "../icons/motor.png";

import PERSON_PNG from "../icons/tracePerson.png";

import { getTrace, exportTrace } from "@/api/lsd/lsd";
import dayjs from "dayjs";

export default {
  name: "trace",
  props: {
    visible: {
      required: true,
      default: false,
    },
    tracePoint: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      fullLoading: [],

      mapHeight: window.innerHeight - 140,
      activeIndex: 0,
      activeMapStyleIndex: 1,
      mapViewMode: "2D",
      mapRuler: null,
      traceListVisible: false,

      traceList: [], //轨迹数据
      gpsCount: 0,
      maxIndex: 0,
      currentIndex: 0,
      currentGpsIndex: 0,

      isMoving: false,
      moveDuration: 1000,
      traceLine: [],

      passedPolyline: null,
      moveMarker: null,
      mapObj: null,
      moveToTimer: null,

      quicktimeActive: 1, //今天，昨天，近三天
      dateRange: [
        new Date(new Date(new Date().toLocaleDateString()).getTime()),
        new Date(
          new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
        ),
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    computedSpeed() {
      if (this.moveDuration == 1000) {
        return "1.0X";
      } else if (this.moveDuration == 800) {
        return "1.25X";
      } else if (this.moveDuration == 600) {
        return "1.5X";
      } else if (this.moveDuration == 400) {
        return "2.0X";
      } else if (this.moveDuration == 200) {
        return "3.0X";
      } else if (this.moveDuration == 1200) {
        return "0.75X";
      } else if (this.moveDuration == 1400) {
        return "0.5X";
      }
    },
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },

  methods: {
    mapInit() {
      this.mapObj = new AMap.Map("trace-map", {
        resizeEnable: true,
        zoom: 12,
        zooms: [3, 20],
        expandZoomRange: true,
      });
      let self = this;
      this.mapObj.plugin(["AMap.MapType", "AMap.RangingTool"], function () {
        //地图类型切换
        var type = new AMap.MapType({
          defaultType: 0, //使用2D地图
        });
        self.mapObj.addControl(type);
        self.ruler = new AMap.RangingTool(self.mapObj);
      });

      this.mapObj.setFitView();
    },
    toggleTraceList() {
      this.traceListVisible = !this.traceListVisible;
    },
    // 打开加载层
    openLoading() {
      this.fullLoading = this.$loading({
        lock: true,
        text: "读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleSearchTrace(index) {
      this.openLoading();

      if (index == 1) {
        this.quicktimeActive = index;
        this.dateRange = [
          dayjs().set("hour", 0).set("minute", 0).set("second", 0).$d,
          dayjs().add(1, "day").set("hour", 0).set("minute", 0).set("second", 0)
            .$d,
        ];
      } else if (index == 2) {
        this.quicktimeActive = index;
        this.dateRange = [
          dayjs()
            .add(-1, "day")
            .set("hour", 0)
            .set("minute", 0)
            .set("second", 0).$d,
          dayjs().set("hour", 0).set("minute", 0).set("second", 0).$d,
        ];
      } else if (index == 3) {
        this.quicktimeActive = index;
        this.dateRange = [
          dayjs()
            .add(-2, "day")
            .set("hour", 0)
            .set("minute", 0)
            .set("second", 0).$d,
          dayjs().add(1, "day").set("hour", 0).set("minute", 0).set("second", 0)
            .$d,
        ];
      }
      getTrace({
        deviceId: this.tracePoint.deviceId,
        beginTime: dayjs(this.dateRange[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(this.dateRange[1]).format("YYYY-MM-DD HH:mm:ss"),
        devicePhoneNum: this.tracePoint.devicePhoneNum,
      }).then((response) => {
        this.traceList = response.data;

        this.fullLoading.close();

        if (this.traceList.length == 0) {
          this.$message.error("此时间段无数据");
        } else {
          this.MarkerMovingInit();
        }
      }).finally(() => {
        this.fullLoading.close();
      });
    },
    MarkerMovingInit() {
      //清除前一次查询轨迹
      this.mapObj.clearMap();
      if (this.isMoving) {
        this.stopMove();
        this.isMoving = false;
      }

      if (this.mapObj && this.passedPolyline) {
        this.mapObj.remove(this.passedPolyline);
      }
      this.currentIndex = 0;
      this.currentGpsIndex = 0;

      //开始这一次
      this.maxIndex = 0;
      this.gpsCount = this.traceList.length;
      this.maxIndex = this.traceList.length - 1;

      this.traceLine = this.traceList.map((item) => {
        return [parseFloat(item.lng), parseFloat(item.lat)];
      });

      // 绘制轨迹
      let polyline = new AMap.Polyline({
        map: this.mapObj,
        path: JSON.parse(JSON.stringify(this.traceLine)),
        showDir: true,
        strokeColor: "#2288ff", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid", //线样式
      });

      this.passedPolyline = new AMap.Polyline({
        map: this.mapObj,
        // path: traceLine,
        showDir: true,
        strokeColor: "#aaff55", //线颜色
        strokeOpacity: 0.8, //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid", //线样式
      });

      let self = this;
      self.moveMarker = new AMap.Marker({
        map: self.mapObj,
        position: self.traceLine[0],
        icon: self.tracePoint.pointType == 1 ? CAR_PNG : PERSON_PNG,
        offset:
          self.tracePoint.pointType == 1
            ? new AMap.Pixel(-0, -0)
            : new AMap.Pixel(0, 0),

        autoRotation: true,
        anchor: "middle-center",

        // angle: -90,
      });

      this.$nextTick(() => {
        this.mapObj.setFitView();
      });
    },
    getPolyLine(dataCur, dataNext) {
      if (dataCur == null || dataNext == null) {
        return null;
      }
      const traceLine = []; // 创建线覆盖物节点坐标数组
      traceLine.push([dataCur.lng, dataCur.lat]);
      traceLine.push([dataNext.lng, dataNext.lat]);
      let polyline = null;
      // const curCarryStatus = parseInt(dataCur.CarryStatus);
      // const nextCarryStatus = parseInt(dataNext.CarryStatus);
      // if (
      //   (curCarryStatus === 1 && nextCarryStatus === 1) ||
      //   (curCarryStatus === 2 && nextCarryStatus === 1)
      // ) {
      //   // 空车
      //   polyline = new AMap.Polyline({
      //     path: traceLine, // 设置线覆盖物路径
      //     strokeColor: "#0000ff", // 线颜色
      //     strokeOpacity: 0.6, // 线透明度
      //     strokeWeight: 3, // 线宽
      //     strokeStyle: "solid", // 线样式
      //     strokeDasharray: [10, 5], // 补充线样式
      //   });
      // } else if (
      //   (curCarryStatus === 1 && nextCarryStatus === 2) ||
      //   (curCarryStatus === 2 && nextCarryStatus === 2)
      // ) {
      //   // 重车
      //   polyline = new AMap.Polyline({
      //     path: traceLine, // 设置线覆盖物路径
      //     strokeColor: "red", // 线颜色
      //     strokeOpacity: 0.8, // 线透明度
      //     strokeWeight: 3, // 线宽
      //     strokeStyle: "solid", // 线样式
      //     strokeDasharray: [10, 5], // 补充线样式
      //   });
      // } else {
      polyline = new AMap.Polyline({
        path: traceLine, // 设置线覆盖物路径
        strokeColor: "black", // 线颜色
        strokeOpacity: 0.8, // 线透明度
        strokeWeight: 3, // 线宽
        strokeStyle: "solid", // 线样式
        strokeDasharray: [10, 5], // 补充线样式
      });
      // }
      return polyline;
    },

    carStartMove() {
      if (this.currentGpsIndex === this.maxIndex) {
        this.currentGpsIndex = 0;
        this.currentIndex = 0;
        this.moveMarker.setPosition([
          this.traceList[0].lng,
          this.traceList[0].lat,
        ]);
      }
      if (this.currentGpsIndex === 0) {
        this.passedPolyline.setPath(this.traceLine.slice(0, 1));
      }
      this.isMoving = true;
      this.moveCar();
    },
    carPauseMove() {
      if (this.isMoving) {
        this.stopMove();
        this.isMoving = false;
      }
    },
    carResetMove() {
      if (this.isMoving) {
        this.stopMove();
        this.isMoving = false;
      }
      this.currentGpsIndex = 0;
      this.currentIndex = 0;
      this.moveMarker.setPosition([
        this.traceList[0].lng,
        this.traceList[0].lat,
      ]);
      this.passedPolyline.setPath(this.traceLine.slice(0, 1));

      // this.moveMarker.setIcon(
      //   this.getCarIcon(this.traceList[0].RunStatus, this.traceList[0].CarryStatus)
      // );
    },
    carBackMove() {
      if (this.currentGpsIndex > 0) {
        this.currentGpsIndex--;
        this.currentIndex--;
      }
    },
    carforeMove() {
      if (this.currentIndex < this.maxIndex) {
        this.currentGpsIndex++;
        this.currentIndex++;
      }
    },
    carSlowMove() {
      if (this.moveDuration < 1400) {
        this.moveDuration += 200;
      }
    },
    carFastMove() {
      if (this.moveDuration > 200) {
        this.moveDuration = this.moveDuration - 200;
      }
    },

    moveCar() {
      const self = this;
      if (this.currentIndex === this.maxIndex) {
        this.stopMove();
        this.isMoving = false;
        return;
      }
      const bound = this.mapObj.getBounds();
      if (!bound.contains(this.moveMarker.getPosition())) {
        this.mapObj.panTo(this.moveMarker.getPosition());
      }
      this.currentGpsIndex++;
      this.currentIndex++;
      // this.moveMarker.setIcon(
      //   this.getCarIcon(
      //     this.traceList[this.currentGpsIndex].RunStatus,
      //     this.traceList[this.currentGpsIndex].CarryStatus
      //   )
      // );
      if (
        this.traceLine[this.currentGpsIndex][0] ==
        this.traceList[this.currentGpsIndex - 1][0] &&
        this.traceList[this.currentGpsIndex][1] !==
        this.traceList[this.currentGpsIndex - 1][1]
      ) {
        if (this.isMoving) {
          setTimeout((e) => {
            if (self.isMoving) {
              self.moveCar();
            }
          }, 10);
        }
      } else {
        // // AMap.plugin("AMap.MoveAnimation", function () {
        // self.moveMarker.moveAlong(
        //   this.traceList.map((v) => {
        //     return [v.lng, v.lat];
        //   }),
        //   {
        //     duration: self.moveDuration,
        //     // delay: 500,
        //   }
        // );
        this.moveTo(
          this.moveMarker,

          this.traceLine[this.currentGpsIndex],

          this.moveDuration
        );
        // });
      }
    },
    moveTo(_marker, targetPosition, speed) {
      //先清理定时器

      //一会要清理定时器(只产生一个定时器)
      clearInterval(this.moveToTimer);
      let angle = this.traceList[this.currentGpsIndex - 1].direction - 90;
      _marker.setAngle(angle);
      let startPosition = [
        _marker.getPosition().lng,
        _marker.getPosition().lat,
      ];
      let i = 0;
      let numDeltas = 20;
      let distance = this.getDistance(
        startPosition[1],
        startPosition[0],
        targetPosition[1],
        targetPosition[0]
      );
      numDeltas =
        parseInt((distance * 100) / 10) > 1
          ? parseInt((distance * 100) / 10)
          : 5;

      let deltaLat = (targetPosition[0] - startPosition[0]) / numDeltas;
      let deltaLng = (targetPosition[1] - startPosition[1]) / numDeltas;

      if (numDeltas > 1) {
        console.log(numDeltas);
      }

      let self = this;

      this.moveToTimer = setInterval(function () {
        let moveToPosition = [];
        if (i < numDeltas) {
          moveToPosition[0] = startPosition[0] + deltaLat * i;
          moveToPosition[1] = startPosition[1] + deltaLng * i;

          _marker.setPosition(moveToPosition);

          i++;
          self.moving({ passedPath: [startPosition, moveToPosition] });
        } else {
          //已经到达最后一次
          _marker.setPosition(targetPosition);
          clearInterval(self.moveToTimer);
          self.moveend();
        }
      }, parseInt(numDeltas == 1 ? parseInt(speed / 100) : speed / numDeltas));
    },
    moving(e) {
      const passingPolyline = this.traceLine.slice(0, this.currentGpsIndex - 1);

      this.passedPolyline.setPath([...passingPolyline, ...e.passedPath]);
    },
    moveend() {
      this.moveCar();
    },
    stopMove() {
      clearInterval(this.moveToTimer);
    },

    moveSlider(v) {
      if (this.isMoving) {
        if (v > this.currentGpsIndex || v < this.currentGpsIndex) {
          this.stopMove();
          this.isMoving = false;

          this.passedPolyline.setPath(
            v > 0 ? this.traceLine.slice(0, v) : this.traceLine.slice(0, 1)
          );
          this.moveMarker.setPosition([
            this.traceList[v].lng,
            this.traceList[v].lat,
          ]);
          // this.moveMarker.setIcon(
          //   this.getCarIcon(this.traceList[v].RunStatus, this.traceList[v].CarryStatus)
          // );

          const bound = this.mapObj.getBounds();
          if (!bound.contains(this.moveMarker.getPosition())) {
            this.mapObj.panTo(this.moveMarker.getPosition());
          }
        }
      } else {
        if (this.mapObj != null) {
          this.passedPolyline.setPath(
            v > 0 ? this.traceLine.slice(0, v) : this.traceLine.slice(0, 1)
          );
          this.moveMarker.setPosition([
            this.traceList[v].lng,
            this.traceList[v].lat,
          ]);
          // this.moveMarker.setIcon(
          //   this.getCarIcon(this.traceList[v].RunStatus, this.traceList[v].CarryStatus)
          // );
          const bound = this.mapObj.getBounds();
          if (!bound.contains(this.moveMarker.getPosition())) {
            this.mapObj.panTo(this.moveMarker.getPosition());
          }
        }
      }
      // 当重置为0时触发，可重新绘制轨迹
      if (v === 0 && this.mapObj !== null) {
        this.passedPolyline.setPath(this.traceLine.slice(0, 1));
      }
    },
    afterMoveSlider(v) {
      this.currentGpsIndex = v;
    },

    getDistance(longitude, latitude, longitude2, latitude2) {
      var lat1 = (Math.PI / 180) * latitude;
      var lat2 = (Math.PI / 180) * latitude2;
      var lon1 = (Math.PI / 180) * longitude;
      var lon2 = (Math.PI / 180) * longitude2;

      //地球半径，公里
      var R = 6371.393;
      var d =
        Math.acos(
          Math.sin(lat1) * Math.sin(lat2) +
          Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)
        ) * R;

      //單位：公里
      return d;
    },

    controlChange(index) {
      if (this.activeIndex == index) {
        this.activeIndex = 0;
        if (index == 2) {
          this.ruler.turnOff();
        }
      } else {
        this.activeIndex = index;
        if (index == 2) {
          this.ruler.turnOn();
        } else {
          this.ruler.turnOff();
        }
      }
    },
    changeMapLayer(index) {
      this.activeMapStyleIndex = index;
      if (index == 1) {
        if (this.mapViewMode == "3D") {
          this.mapViewMode = "2D";
          this.mapObj = new AMap.Map("map", {
            resizeEnable: true,
            zoom: 12,
          });
        } else {
          this.mapObj.setMapStyle("amap://styles/normal");
        }
      } else if (index == 2) {
        this.mapObj.setMapStyle("amap://styles/darkblue");
      } else if (index == 3) {
        if (this.mapViewMode == "2D") {
          this.mapViewMode = "3D";
          this.mapObj = new AMap.Map("map", {
            resizeEnable: true,
            zoom: 12,
            pitch: 50,
            viewMode: "3D",
            buildingAnimation: true, //楼块出现是否带动画
          });
        }
      }
    },

    opened() {
      if (this.mapObj) {
        this.mapObj.clearMap();
        this.handleSearchTrace(1);
      } else {
        this.mapInit();
        this.handleSearchTrace(1);
      }
    },
    closed() {
      if (this.isMoving) {
        this.stopMove();
      }
      this.mapObj.clearMap();
    },
    handleExport() {
      if (this.traceList.length == 0) {
        this.msgInfo("此段时间无轨迹");
        return;
      }
      this.download(
        "home/trace/export",
        {
          targetName: this.tracePoint.name,
          devicePhoneNum: this.tracePoint.devicePhoneNum,
          beginTime: dayjs(this.dateRange[0]).format("YYYY-MM-DD HH:mm:ss"),
          endTime: dayjs(this.dateRange[1]).format("YYYY-MM-DD HH:mm:ss"),
        },
        `trace_${new Date().getTime()}.xlsx`
      );
    },
  },

  mounted() { },
};
</script>

<style lang="scss" scoped>
.map-wrap {
  width: 100%;
}

#trace-map {
  width: 100%;
  height: 100%;
}

.trace-play {
  width: 1100px;
  position: fixed;
  bottom: 15px;
  left: 50%;
  margin-left: -550px;

  .play-bar {
    width: 100%;
    height: 48px;
    background: rgba(47, 50, 55, 0.9);
    color: #fff;
    padding: 0 21px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;

    .play-progress {
      width: 580px;
    }

    .trace-detail-btn {
      cursor: pointer;
    }
  }
}

.trace-left-card {
  position: absolute;
  top: 100px;
  left: 5px;
  width: 370px;

  .info-brief {
    background: rgba(38, 188, 150, 0.15);
    padding: 16px 8px;
    display: flex;
    align-items: center;

    .status {
      border-style: solid;
      border-width: 1px;
      color: rgba(0, 0, 0, 0.45);
      border-color: rgba(0, 0, 0, 0.45);
      background: rgba(0, 0, 0, 0.06);
      padding: 5px 8px 3px;
      font-size: 12px;
    }

    .online {
      color: #52c41a;
      border-color: #52c41a;
      background: rgba(82, 196, 26, 0.1);
    }

    .name {
      color: rgba(0, 0, 0, 0.85);
      font-size: 24px;
      font-weight: bold;
      font-family: "DINPro";
      margin-bottom: 5px;
      margin-left: 8px;
    }

    .type {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.45);
      font-weight: bold;
      margin: 0 8px;
    }
  }

  .quicktime {
    display: flex;

    &>div {
      font-size: 14px;
      font-weight: bold;
      padding: 10px 8px 10px 0;
      cursor: pointer;
    }

    .active {
      color: #25bb96;
    }
  }

  .trace-realtime {
    border-top: 1px solid rgba(0, 0, 0, 0.06);

    .realtime-item {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      margin: 10px 0;
    }
  }
}
</style>
<style lang="scss">
.speed-select {
  width: 100px;

  .el-input {
    input {
      background: rgba(4, 31, 85, 0.4);
      border-radius: 2px;
      border: 0;
      color: #fff;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
    }
  }
}

.speed-popper {
  background: rgba(47, 50, 55, 0.9);
}

.trace-detail-card {
  .el-card__body {
    padding: 0 16px 8px 16px;
  }

  .el-table .el-table__header-wrapper th {
    font-size: 12px;
  }
}

.trace-map-dialog {
  .el-dialog__header {
    background: #46a6ff;
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 24px;
  }

  .el-dialog__body {
    padding: 10px;
    width: 100%;
    height: calc(100vh - 125px);
  }
}
</style>
